import React from "react";
import "./index.css"
 
import {nanoid} from 'nanoid'
export default function Header({setTodoList,todoList}){
    //    发布事件函数
    const publishHandle =(e)=>{
        // 判断是否点击的是回车 e.keyCode !=13这个是回车的意思
        if (e.keyCode !==13) return;
        
        // 获取输入的内容，判断是否输入为空
        const publishValue =e.target.value.trim();
        if(!publishValue)return alert("请输入正确的内容");

        //创建新的todo对象
        const newTodo ={id: nanoid(), todo: publishValue, done:false} 

        // 调用父组件传递过来的改变todolist的方法，把newTodo添加进去
        setTodoList([newTodo, ...todoList])
        
        //清空输入框
        e.target.value = ""
    }
   
   
    return(
        <div className="todo-header">
            <input type="text" onKeyUp={publishHandle} placeholder="输入你的任务名称，按回车键确认"/>
        </div>
    )
}